<template>
  <div class="systemlog">
    <a-card title="系统日志记录" style="width: 100%">
      <a-button slot="extra" type="primary" style="width: 100%" icon="plus" @click="openadd()">新增日志</a-button>
      <!-- <a-divider /> -->
      <div class="class_table">
        <a-table
          :columns="columns"
          :rowKey="syslog => syslog.id"
          :dataSource="syslog"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination">
          <div slot="content" slot-scope="row">
            <span class="copy"> {{ row.content }}</span>
          </div>
          <div slot="active" slot-scope="row">
            <span class="goodsurl" @click="openadd(row)">改</span>
            <a-popconfirm title="确定删除吗?" ok-text="删除" cancel-text="取消" @confirm="delSystemContent(row.id)">
              <span class="goodsurl quan">删</span>
            </a-popconfirm>
          </div>
        </a-table>
      </div>
    </a-card>

  </div>
</template>

<script>
  import {
    getSystemUpdateList, delSystemContent
  } from '@/api/systemlog'
  // import Moment from 'moment'

  export default {
    name: 'Systemlog',
    data () {
      return {
        isadd: false,
        visible: false,
        confirmLoading: false,
        count: 0,
        columns: [{
            title: 'ID',
            width: 150,
            align: 'center',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '日志内容',
            align: 'center',
             width: 600,
            // dataIndex: 'content',
            scopedSlots: {
              customRender: 'content'
            }
          },
          {
            title: '创建时间',
            align: 'center',
            dataIndex: 'create_at',
            scopedSlots: {
              customRender: 'create_at'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }

        ],
        pagination: {
          pageSize: 15,
          page: 1
        },
        loading: false,
        syslog: []
      }
    },

    computed: {

    },
    created () {
      this.getSystemUpdateList(1, 15)
    },
    mounted () {

    },
    methods: {
         openadd (val) {
      if (val === '') {
        this.$router.push({
          path: '/admin/settings/addlog'
        })
      } else {
        this.$router.push({
          path: '/admin/settings/addlog',
          query: {
            item: JSON.stringify(val)
          }
        })
      }
    },
       // 删除文章
    delSystemContent (id) {
      delSystemContent({
        id: id
      })
        .then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功!')
            this.getSystemUpdateList(1, 15)
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getSystemUpdateList(params.page, 15)
      },
      handleCancel () {
        this.visible = false
        this.form = this.$options.data().form
      },
      openmodal () {
        this.getsyslog(1, 15)
        this.isadd = true
        this.visible = true
      },

      // 获取日志列表
      getSystemUpdateList (page, pagesize) {
        this.loading = true

        getSystemUpdateList({
            page: page,
            pagesize: parseInt(pagesize)
          })
          .then(res => {
            if (res.code === 200) {
              console.log('日志列表返回', res)
              this.count = res.data.count
              this.syslog = res.data.data
              const pagination = {
                ...this.pagination
              }
              pagination.total = res.data.count
              this.pagination = pagination
              this.loading = false
            } else {
              this.$message.info(res.msg)
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .display {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: right;
    margin-bottom: 10px;
  }

  .class_table {
    .copy{
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }
    .goodsurl {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 28px;
      background-color: #fff;
      margin-left: 10px;
      color: #000;
      font-size: 18px;
      // font-weight: bolder;
      text-align: center;
      border-radius: 50%;
      // padding: 5px;
      color: gray;
      cursor: pointer;
      border: 1px solid gray;
    }

    .ant-table-row:hover {
      .goodsurl {
        background-color: orange;
        color: #fff;
        // font-weight: bolder;
        border: none;
      }

      .quan {
        background-color: red;
      }
    }
  }
</style>
